import React from "react"
import PropTypes from "prop-types"
import "../../assets/css/index.scss"
import $ from "jquery"
import { Input,Radio } from 'antd';
import ImgUpload from "../base/ImgUpload.jsx"
const RadioGroup = Radio.Group;
import { Button } from 'antd';
import Header from "../base/Header.jsx"
//订单输入页面
class Index extends  React.Component{
    constructor(props){
        super(props);
        this.goListView=this.goListView.bind(this);
        this.checkForm=this.checkForm.bind(this);
        this.inputChange=this.inputChange.bind(this);
        this.insertForm=this.insertForm.bind(this);
        this.uploadFile=this.uploadFile.bind(this);
        this.onprogress=this.onprogress.bind(this);
        this.state={
            imgSrcList:[],
            progress:0,
            bs:{
                platform:"淘宝",
                commodity_name:"",
                price:0,
                is_price:0,//0 未返本金 1 已返本金
                commission:0,
                is_commission:0,//0 未返佣金 1 已返佣金
                sign:0,//0 未签收 1 已签收
                pay:0,//0 未代付 1 代付
                insertTime:"",
                lastTime:"",
                commodity_href:"",
                business_nike:"",
                business_code:"",
                is_end:0,//0未完结 1 已完结
                shop_name:"",
                gift:"",
                imgsrc:""//图片地址
            }
        }
    }
    componentWillMount(){

        console.log(JSON.stringify(this.props.location.query));
        if(this.props.location.query) {
            let query = this.props.location.query;
            this.setState({bs: query});
        }
    }
    goListView(){
        this.props.history.push("/listView");
    }
    checkForm(){
        event.preventDefault();

        if(isNaN(parseInt(this.state.bs.id))){
            let bs=this.state.bs;
            bs.insertTime=new Date().Format("yyyy-MM-dd hh:mm:ss");
            this.setState({bs},this.insertForm)
        }else{
            this.insertForm();
        }

    }

    insertForm(){
        let This=this;
        var url;
        if(isNaN(parseInt(this.state.bs.id))){
            url="http://101.132.154.41:8008/bs_taobao";
        }else{
            url="http://101.132.154.41:8008/bsUpdate";
        }
        $.ajax({
            url:url,
            type:"post",
            timeout:5000,
            data:This.state.bs,
            success:function(json){
                if(json.code==20000){
                    This.props.history.push("/listView");
                }else{
                    alert(json.error);
                }
            },
            error:function(){
            }
        })
    }

    inputChange(e){
        let bs=this.state.bs;
        bs[e.target.name]=e.target.value;
        this.setState({bs});
    }
    uploadFile(e){
        let fr = new FileReader();
        let formData = new FormData();
        formData.append("file",e.target.files[0]);
        let This=this;
        $.ajax({
            processData: false,
            url:"http://101.132.154.41:8008/upload",
            type:"POST",
            timeout:60000,
            contentType: false,
            data:formData,
            success:function(data){
                // console.log(data.progressValue);
                if(data.code==20000){
                    let imgsrc="http://101.132.154.41:8008/"+data.data;
                    let bs=This.state.bs;
                    bs.imgsrc=imgsrc;
                    This.setState({bs});
                }
            },
            error:function(){
                alert("文件上传超时，刷新页面重新上传");
            },
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if(This.onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress" , This.onprogress, false);
                    return xhr;
                }
            }
        })

        fr.readAsDataURL(e.target.files[0]);
        fr.onload=function(){
            let file=this.result;
            let imgSrcList=This.state.imgSrcList;
            imgSrcList.push({src:this.result});
            This.setState({imgSrcList:imgSrcList},function(){
            });
        }
    }
    onprogress(evt){
        var loaded = evt.loaded;     //已经上传大小情况
        var tot = evt.total;      //附件总大小
        console.log(evt.loaded/evt.total);
        this.setState({progress:evt.loaded/evt.total*100})
    }

    render(){
        console.log(this.state.bs);
        return (
            <div>
                <Header headerText="录入" isRight={true} rightText="刷单列表" headerRightGo={this.goListView} />
                <div className="content-box mt68">
                    <form>
                        <div className="bs-input-item-box">
                            <label className="left-label-text">选择平台</label>
                            <select value={this.state.bs.platform} name="platform" onChange={this.inputChange}>
                                <option value="淘宝">淘宝</option>
                                <option value="京东">京东</option>
                                <option value="拼多多">拼多多</option>
                                <option value="其他">其他</option>
                            </select>


                        </div>
                        <div  className="bs-input-item-box">
                            <Input addonBefore="商品名称" name="commodity_name" value={this.state.bs.commodity_name} onChange={this.inputChange}  placeholder="输入商品名称" />
                        </div>
                        <div  className="bs-input-item-box">
                            <Input addonBefore="商品价格" name="price" value={this.state.bs.price} onChange={this.inputChange}  placeholder="输入商品价格" />
                        </div>

                        <div className="bs-input-item-box">
                            <label className="left-label-text">本金</label>
                            <RadioGroup onChange={this.inputChange} name="is_price"   value={this.state.bs.is_price}>
                                <Radio value={0}>未返本金</Radio>
                                <Radio value={1}>已返本金</Radio>
                            </RadioGroup>
                        </div>

                        <div  className="bs-input-item-box">
                            <Input addonBefore="佣金" name="commission" value={this.state.bs.commission} onChange={this.inputChange}  placeholder="输入佣金" />
                        </div>

                        <div className="bs-input-item-box">
                            <label className="left-label-text">佣金</label>
                            <RadioGroup onChange={this.inputChange} name="is_commission"   value={this.state.bs.is_commission}>
                                <Radio value={0}>未返</Radio>
                                <Radio value={1}>已返</Radio>
                            </RadioGroup>
                        </div>


                        <div  className="bs-input-item-box">
                            <label className="left-label-text">签收</label>
                            <RadioGroup onChange={this.inputChange} name="sign"   value={this.state.bs.sign}>
                                <Radio value={0}>未签收</Radio>
                                <Radio value={1}>已签收</Radio>
                            </RadioGroup>
                        </div>

                        <div  className="bs-input-item-box">
                            <label className="left-label-text">代付</label>
                            <RadioGroup onChange={this.inputChange} name="pay"   value={this.state.bs.pay}>
                                <Radio value={0}>非代付</Radio>
                                <Radio value={1}>代付</Radio>
                            </RadioGroup>
                        </div>

                        <div  className="bs-input-item-box">
                            <Input addonBefore="商品链接" name="commodity_href" value={this.state.bs.commodity_href} onChange={this.inputChange}  placeholder="输入商品链接" />
                        </div>

                        <div  className="bs-input-item-box">
                            <Input addonBefore="微信昵称" name="business_nike" value={this.state.bs.business_nike} onChange={this.inputChange}  placeholder="输入微信昵称" />
                        </div>

                        <div  className="bs-input-item-box">
                            <Input addonBefore="微信号码" name="business_code" value={this.state.bs.business_code} onChange={this.inputChange}  placeholder="输入微信号码" />
                        </div>

                        <div  className="bs-input-item-box">
                            <label className="left-label-text">完结</label>
                            <RadioGroup onChange={this.inputChange} name="is_end"   value={this.state.bs.is_end}>
                                <Radio value={0}>未完结</Radio>
                                <Radio value={1}>完结</Radio>
                            </RadioGroup>
                        </div>

                        <div  className="bs-input-item-box">
                            <Input addonBefore="店铺名称" name="shop_name" value={this.state.bs.shop_name} onChange={this.inputChange}  placeholder="输入店铺名称" />
                        </div>

                        <div  className="bs-input-item-box">
                            <Input addonBefore="礼品" name="gift" value={this.state.bs.gift} onChange={this.inputChange}  placeholder="输入礼品" />
                        </div>

                        <div  className="bs-input-item-box ">
                            <label className="left-label-text">上传图片</label>
                            {this.state.imgSrcList.map((value,index)=>
                                (
                                    <ImgUpload key={index} progress={this.state.progress} imgsrc={value.src} />
                                )
                            )}
                            <div className="upload-imgage-box">
                                <input  type="file"  onChange={this.uploadFile}  />
                            </div>
                        </div>
                        <Button className="save-btn" size="large" onClick={this.checkForm} type="primary">保存</Button>
                    </form>
                </div>
            </div>
        )
    }
}
export default Index